.main {
  position: relative;
  margin-bottom: 30px;
  align-items: center;
  flex-grow: 1;
  padding-top: 40px;
  padding-bottom: 40px;
  overflow-x: hidden;

  @media (min-width: 0px) {
    padding: 0 12px;
  }
  @media (min-width: 769px) {
    padding: 0 32px;
  }
  @media (min-width: 1280px) {
    padding: 0 64px;
  }
}

.cardWrapper {
  display: flex;
  width: 100%;
  will-change: transform;
  transform-origin: top left;
  transition: 0.3s ease-out;
  position: relative;
  z-index: 2;
}

.cardInfo,
.cardInfo:before {
  border-radius: 8px;
  justify-content: center;
  display: flex;
}

.cardInfo {
  position: relative;
  color: #fff;
  z-index: 10;
  padding: 10px 12px;
}

.cardInfo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  backdrop-filter: blur(40px);
  border-radius: 8px;
  opacity: 0.4;
  z-index: -1;
  background: rgba(48, 48, 52, 0.6);
}

.cardWrapper .cardInfo {
  display: flex;
  flex-direction: column;
}
